<style scoped lang="less">
// 侧边栏
.right-aside {
  // width: 300px;
  // position: fixed;
  // 分割线的外边距 上下 距离
  .ivu-divider-horizontal {
    margin: 10px 0;
  }
  .request-option-detail {
    // margin-top: 9px;
    .ivu-form-item-label {
      font-size: 15px;
    }
    // 表单元素上下距离
    .ivu-form-item {
      margin-bottom: 10px;
    }
  }
  .request-option-button {
    margin-top: 9px;
    height: 29px;
  }
}
</style>
<template>
  <div class="right-aside">
    <!-- 答疑室学生信息及操作 -->
    <div v-if="ownInfo.isOwnRoom === true && ownInfo.roleKey === 'student'">
      <Card>
        <p slot="title">我的信息</p>
        <div class="room-student-uers-info">
          <com-room-list-user-info :roomInfo="ownInfo"></com-room-list-user-info>
        </div>
        <!-- <Divider/> -->
      </Card>
      <Card style="margin-top:5px" v-if="roomStatus === 1">
        <p slot="title">我的操作</p>
        <div class="room-student-uers-info">
          <Button type="info" @click="addRequestBtn">提问</Button>
          <Button type="error" style="margin-left:5px" @click="quitRoomBtn">退出</Button>
        </div>
        <!-- <Divider/> -->
      </Card>
    </div>
    <!-- 答疑室老师信息及操作 -->
    <div v-if="ownInfo.isOwnRoom === true && ownInfo.roleKey === 'teacher'">
      <Card title="我的信息" :bordered="false">
        <div>
          <com-room-list-user-info :roomInfo="ownInfo"></com-room-list-user-info>
        </div>
      </Card>
      <Card title="相关操作" style="margin-top:10px" :bordered="false">
        <div>
          <div class="open-room-wrap">
            <Modal
              title="上传文件"
              :value="upLoadFilesModalShow"
              :mask-closable="false"
              :closable="true"
              :draggable="true"
              ok-text="保存"
              @on-ok="saveFilesBtn"
              @on-cancel="cancelSaveFilesBtm"
            >
              <com-update-files ref="UpdateFilesFormRef"></com-update-files>
            </Modal>
          </div>
          <div>
            答疑室：
            <span v-if="roomStatus === 2">
              <Button type="info" @click="restartRoom">重新开通</Button>
            </span>
            <span v-if="roomStatus === 1">
              <Button type="success" @click="updateRoomBtn">修改</Button>
              <Button type="error" style="margin-left: 8px;" @click="closeRoom">关闭</Button>
            </span>
            <div v-if="roomStatus === 1">
              <Divider/>
              <span>
                其他：
                <Button type="primary" @click="uploadFilesBtn">上传文件</Button>
              </span>
              <Divider/>
            </div>
          </div>
        </div>
      </Card>
    </div>
    <!-- 非答疑室人员信息展示 -->
    <div v-if="ownInfo.isOwnRoom === false">
      <Card title="我的信息" :bordered="false">
        <div>
          <com-room-list-user-info :roomInfo="ownInfo"></com-room-list-user-info>
        </div>
      </Card>
      <Card
        v-if="ownInfo.roleKey === 'student'&& ownInfo.isOwnRoom === false && roomStatus === 1"
        style="margin-top:5px"
      >
        <p slot="title">我的操作</p>
        <div class="room-student-operator">
          <Button v-if="ownInfo.isApply!==true" type="info" ghost @click="apply">申请加入</Button>
          <Tag v-else type="border" color="success">申请处理中</Tag>
        </div>
        <!-- <Divider/> -->
      </Card>
    </div>
    <!-- 修改答疑室模态框 -->
    <div class="update-room-wrap">
      <Modal
        title="修改答疑室"
        :value="UpdateRoomModalShow"
        :mask-closable="false"
        :closable="true"
        :draggable="true"
        @on-ok="HandleUpdateRoomBtm"
      >
        <com-open-room
          :roomForm="updateRoomInfo"
          @open-room-success="updateRoomSuccess"
          ref="UpdateRoomFormRef"
        ></com-open-room>
        <div slot="footer" v-if="true">
          <Button type="text" size="large" @click="updateRoomCancelBtn">取消</Button>
          <Button type="primary" size="large" @click="HandleUpdateRoomBtm">保存</Button>
        </div>
      </Modal>
    </div>
    <!-- 提问模态框 -->
    <div class="room-request-wrap">
      <Modal
        title="提问"
        :value="roomRequestModalShow"
        :mask-closable="false"
        :closable="false"
        :draggable="true"
        :width="800"
      >
        <!-- <com-open-room
          :roomForm="updateRoomInfo"
          @open-room-success="updateRoomSuccess"
          ref="UpdateRoomFormRef"
        ></com-open-room>-->
        <com-room-request
          ref="RoomRequestRef"
          :reqeust-form="requestForm"
          @handle-cancel="roomRequestCancel"
          @handle-success="handlerRoomRequestRoom"
        ></com-room-request>
        <div slot="footer" v-if="true">
          <!-- <Button type="text" size="large" @click="roomRequestCancelBtn">取消</Button>
          <Button type="primary" size="large" @click="HandlerRoomRequestRoomBtm">提问</Button>-->
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import { getToken } from '@/libs/util'
import Vue from 'vue'
import ComUpdateFiles from '@/view/ora-web/requst-answer-room/room-details/ComUploadFiles.vue'
import ComRoomListUserInfo from '@/view/ora-web/requst-answer-room/room-list/ComRoomListUserInfo'
import ComOpenRoom from '@/view/ora-web/requst-answer-room/room-list/ComOpenRoom.vue'
import ComRoomRequest from './ComRoomRequest.vue'

export default {
  props: ['ownInfo', 'roomInfo'],
  components: {
    ComRoomListUserInfo,
    ComUpdateFiles,
    ComOpenRoom,
    ComRoomRequest
  },
  data () {
    return {
      conditionForm: {},

      updateRoomInfo: {},
      upLoadFilesModalShow: false,
      UpdateRoomModalShow: false,

      roomRequestModalShow: false, // 提问模态框 隐现
      requestForm: {}
    }
  },

  methods: {
    //= ===================== 答疑室提问 start ====================
    // 点击提问按钮
    addRequestBtn () {
      this.requestForm.roomId = this.roomInfo.tid // 带上答疑室信息
      this.roomRequestModalShow = true
    },
    // 取消答疑室提问
    roomRequestCancel () {
      this.roomRequestModalShow = false
    },
    // 处理提问请求的按钮
    handlerRoomRequestRoom () {
      this.roomRequestCancel()
      // 通知父组件刷新界面
      this.$emit('flush-request-data')
    },

    // =================== 答疑室提问 end ======================

    // 退出答疑室按钮
    quitRoomBtn () {
      this.confirm('退出答疑室', this.handleQuitRoom)
    },
    // 处理退出答疑室请求
    handleQuitRoom () {
      this.$httpUtil.asyncDelete(
        'web/raroom/student/quitRoom',
        {
          id: this.roomInfo.tid
        },
        res => {
          if (res.data.code === 200) {
            // debugger;
            this.$Message.success(res.data.msg)
            // 通知父组件刷新界面
            this.$emit('update-data') // 通知父组件 重新刷新 页面数据
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },
    // 申请加入答疑室
    apply () {
      this.$myTools.confirm(this, '申请加入', this.handleApply)
    },
    // 处理申请加入
    handleApply () {
      this.$httpUtil.asyncPost(
        'web/raroom/student/apply',
        {
          id: this.roomInfo.tid
        },
        res => {
          if (res.data.code === 200) {
            // debugger;
            this.$Message.success(res.data.msg)
            // 通知父组件刷新界面
            this.$emit('update-data') // 通知父组件 重新刷新 页面数据
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    // 关闭答疑室
    closeRoom () {
      this.$myTools.confirm(this, '关闭', this.handleCloseRoom)
    },
    handleCloseRoom () {
      this.$httpUtil.asyncPost('web/raroom/closeRoom', {}, res => {
        debugger
        if (res.data.code === 200) {
          this.$Message.success(res.data.msg)
          this.$emit('com-flush') // 通知父组件 重新刷新 页面数据
          // window.location.reload()
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },

    // 重新打开答疑室
    restartRoom () {
      this.confirm('重新打开', this.handleRestartRoom)
    },
    handleRestartRoom () {
      this.$httpUtil.asyncPost('web/raroom/restartRoom', {}, res => {
        debugger
        if (res.data.code === 200) {
          this.$Message.success(res.data.msg)
          this.$emit('com-flush') // 通知父组件 重新刷新 页面数据
          // window.location.reload()
        } else {
          this.$Message.error(res.data.msg)
        }
      })
    },
    // 修改答疑室取消
    updateRoomCancelBtn () {
      this.UpdateRoomModalShow = false
    },
    // 修改答疑室按钮点击
    updateRoomBtn () {
      this.updateRoomInfo = JSON.parse(JSON.stringify(this.roomInfo))
      this.UpdateRoomModalShow = true
    },
    HandleUpdateRoomBtm () {
      this.confirm('保存修改', () => {
        this.$refs.UpdateRoomFormRef.handleOpen()
      })
    },
    // 答疑室修改成功的回调
    updateRoomSuccess () {
      debugger
      this.UpdateRoomModalShow = false
      this.$emit('update-data')
    },

    // 取消保存文件
    cancelSaveFilesBtm () {
      debugger
      this.$refs.UpdateFilesFormRef.clearFiles()
      this.upLoadFilesModalShow = false
    },
    // 答疑室开通成功的回调
    openRoomSuccess () {
      this.OpenRoomModalShow = false
    },

    //* *******上传文件start******** */
    uploadFilesBtn () {
      this.upLoadFilesModalShow = true
      this.$refs.UpdateFilesFormRef.clearFiles() // // 清空文件列表
    },
    // 保存上传的文件
    saveFilesBtn () {
      debugger
      let fileIds = this.$refs.UpdateFilesFormRef.getUpdateFileIds()
      this.$httpUtil.asyncPost(
        'web/raroom/file/upload',
        {
          fileIds: fileIds
        },
        res => {
          if (res.data.code === 200) {
            // debugger;
            this.$Message.success(res.data.msg)
            // 通知父组件 文件上传完成
            this.$emit('file-upload-success') // 通知的是主页面 其实就是答疑室详情页
            this.cancelSaveFilesBtm() // 清空列表  隐藏模态框
          } else {
            this.$Message.error(res.data.msg)
          }
        }
      )
    },

    //* *******上传文件 end******** */

    confirm (content, okHandle) {
      this.$myTools.confirm(this, content, okHandle)
    },
    // 初始化方法
    init () {
      // this.getAllData();
    }
  },
  computed: {
    roomStatus () {
      return this.roomInfo.status
    }
  },
  mounted () {
    this.init()
  },
  watch: {}
}
</script>
